<template>
	<view>
		<view v-if="movieQueryList.length==0">
			<view class="content">
				<image src="../../static/icon/不存在.jpg" mode=""></image>
			</view>
			<view class="content">
				<text style="color: #4CD964;">您查询的电影尚未入库,请耐心等待......</text>
			</view>
			<view class="content">
				<button class="mini-btn" type="primary" size="mini" @click="toPath">返回上一级</button>
			</view>
		</view>
		<view  v-else-if="movieQueryList.length!=0">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" style="height:1000upx;">
				<view v-for="(item,index) in movieQueryList" :key="index" class="contentBox">
					<view style="display: flex;flex-direction: row;">
						<view>
							<image :src="getImages(item.images.small)" mode="" class="movieImage" @click="toDetailPage(item.id)"></image>
						</view>
						<view>
							<text>电影名:{{item.original_title}}\n类型:
								<text v-for="(type,idx) in item.genres" :key="idx">
									<text v-if="idx!=item.genres.length-1">{{type}},</text>
									<text v-else-if="idx==item.genres.length-1">{{type}}</text>
								</text>
							</text>
						</view>		
					</view>	
					<view class="spaceLine"></view>
				</view>
			</scroll-view>
			<view class="content">
				<button class="mini-btn" type="primary" size="mini" @click="toPath">返回上一级</button>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				movieQueryList:[],
				 scrollTop: 0
			}
		},
		components:{
			
		},
		methods: {
			toPath(){
				uni.navigateBack()
			},
			getImages(_url){
			    if( _url !== undefined ){
			        let _u = _url.substring( 7 );
			        return 'https://images.weserv.nl/?url=' + _u;
			    }
			},
			toDetailPage(id){
				uni.navigateTo({
					url:"../movie_detail_page/movie_detail_page?doubanId="+id
				})
			}
		},
		onLoad(option){
			uni.request({
			    url: '/api/tato/searchMovieByMovieName', 
			    data: {
			        movieName: option.name
			    },
			    success: (res) => {
					console.log(res.data)
			      for(let i = 0;i < res.data.length;i++){
					  this.movieQueryList.push(JSON.parse(res.data[i]))
				  }
			    }
			});
		}
	}
</script>

<style>
.spaceLine{
	border: 1upx #007AFF solid;
}
.contentBox{
	background-color: #C0C0C0;
}
.content{
	display: flex;
	justify-content: center;
}
.movieImage{
	width: 400upx;
	height: 400upx;
}
</style>
